<!--  -->
<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px" :rules="rules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院名称" prop="hospital_name">
              <el-input v-model="form.hospital_name" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院地址" prop="location_des">
              <el-input v-model="form.location_des" @blur="getLngLat" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经度" prop="location_lng">
              <el-input v-model="form.location_lng" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度" prop="location_lat">
              <el-input v-model="form.location_lat" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="mt_20">医院坐标</div>
        <div v-show="isShow" id="mapcontainer" />
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院好评率" prop="applause_rate">
              <el-input v-model="form.applause_rate" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="医院预约量" prop="reservations">
              <el-input v-model="form.reservations" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院类型" prop="hospital_type">
              <el-select v-model="form.hospital_type" clearable placeholder="请选择">
                <el-option
                  v-for="item in hospitalType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="医院简介" prop="hospital_intro">
              <el-input
                v-model="form.hospital_intro"
                placeholder="请输入"
                maxlength="300"
                clearable
                type="textarea"
                rows="6"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="机构负责人姓名" prop="org_realname">
              <el-input v-model="form.org_realname" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机构负责人手机" prop="org_phone">
              <el-input v-model="form.org_phone" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="机构签约时间" width="236" prop="org_signtime">
              <!-- value-format="yyyy-MM-dd HH:mm:ss" range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"-->
              <el-date-picker v-model="form.org_signtime" placeholder="选择日期时间" type="datetime" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="选择大区" prop="area_id">
              <el-select v-model="form.area_id" clearable placeholder="请选择">
                <el-option
                  v-for="item in regionalList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择板块" prop="hospital_module">
              <el-select v-model="form.hospital_module" clearable placeholder="请选择">
                <el-option
                  v-for="item in plateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="选择省份" prop="province_id">
              <el-select
                v-model="form.province_id"
                clearable
                @change="handleChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in provincesList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择城市" prop="city_id">
              <el-select v-model="form.city_id" clearable placeholder="请选择">
                <el-option
                  v-for="item in citysList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="机构logo" prop="hospital_icon">
              <newUpload
                ref="uploadImg"
                :file-num="1"
                :file-list="fileList"
                :width="800"
                :height="800"
              />
              <div>图片尺寸为800px*800px</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="机构主辅图" prop="show_image">
              <newUpload
                ref="uploadImg1"
                :file-num="1"
                :file-list="fileList1"
                :width="800"
                :height="600"
              />
              <div>最多上传1张，图片尺寸为800px*600px</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="机构详情" prop="hospital_detail" style="width:96%">
              <Tinymce v-model="form.hospital_detail" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="allCenter">
          <el-button type="primary" @click="complete('form')">完成</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import newUpload from "@/components/UploadImg/shopImgUp";
import Tinymce from "@/components/Tinymce";
import { getLat } from "@/api/traditionalMange";
import {
  hospitalStore,
  hospitalCreate,
  getRegion,
  getCitys,
  hospitalShow,
  hospitalUpdate
} from "@/api/cashOut";
export default {
  name: "addHospitals",
  components: { Tinymce, newUpload },
  data() {
    return {
      form: {
        hospital_name: "",
        org_realname: "",
        org_phone: "",
        org_signtime: "",
        hospital_type: "",
        hospital_module: "",
        area_id: "",
        province_id: "",
        city_id: "",
        location_des: "",
        location_lat: "",
        location_lng: "",
        applause_rate: "",
        reservations: "",
        hospital_icon: "",
        show_image: [],
        hospital_intro: "",
        hospital_detail: ""
      },
      rules: {
        hospital_name: [
          {
            required: true,
            message: "请输入医院名称",
            trigger: "blur"
          }
        ],
        location_des: [
          {
            required: true,
            message: "请输入医院地址",
            trigger: "blur"
          }
        ],
        applause_rate: [
          {
            required: true,
            message: "请输入医院好评率",
            trigger: "blur"
          }
        ],
        hospital_intro: [
          {
            required: true,
            message: "请输入医院简介",
            trigger: "blur"
          }
        ],
        reservations: [
          {
            required: true,
            message: "请输入医院预约量",
            trigger: "blur"
          }
        ],
        hospital_module: [
          {
            required: true,
            message: "请选择板块",
            trigger: "change"
          }
        ],
        hospital_type: [
          {
            required: true,
            message: "请选择医院类型",
            trigger: "change"
          }
        ],
        org_signtime: [
          {
            required: true,
            message: "请选择签约时间"
          }
        ],
        org_realname: [
          {
            required: true,
            message: "请输入机构负责人姓名",
            trigger: "blur"
          }
        ],
        org_phone: [
          {
            required: true,
            message: "请输入机构负责人手机号",
            trigger: "blur"
          }
        ],
        area_id: [
          {
            required: true,
            message: "请选择大区",
            trigger: "change"
          }
        ],
        hospital_module: [
          {
            required: true,
            message: "请选择板块",
            trigger: "change"
          }
        ],
        province_id: [
          {
            required: true,
            message: "请选择省份",
            trigger: "change"
          }
        ],
        city_id: [
          {
            required: true,
            message: "请选择城市",
            trigger: "change"
          }
        ],
        hospital_icon: [
          {
            required: true,
            message: "请上传机构logo"
          }
        ],
        show_image: [
          {
            required: true,
            message: "请上传机构主辅图"
          }
        ],
        hospital_detail: [
          {
            required: true,
            message: "请填写机构详情",
            trigger: "blur"
          }
        ]
      },
      dates: null,
      regionalList: [], //大区
      plateList: [], //板块
      provincesList: [], //省份
      citysList: [], //城市
      hospitalType: [], //医院类型
      isShow: false, //地图显示
      fileList: [],
      fileList1: [],
      type: ""
    };
  },
  watch: {
    "form.hospital_detail"(val) {
      if (val) {
        this.$refs.form.clearValidate("hospital_detail");
      } else {
        this.$refs.form.validateField("hospital_detail");
      }
    }
  },
  mounted() {
    // console.log("query", this.$route.query);
    this.getHospitalType();
    this.getAllregionList();
    this.type = this.$route.query.type;
    if (this.type == "edit") {
      this.getDetails(this.$route.query.id);
    }
  },

  methods: {
    // 获取详情
    async getDetails(id) {
      let { data: res } = await hospitalShow({ id });
      if (res.status == 0) {
        this.form = res.data;
        this.getCitysList(this.form.province_id);
        this.form.hospital_module = +this.form.hospital_module;
        this.fileList = [
          { url: "https://img.yuepinyuemei.com/" + this.form.hospital_icon }
        ];
        this.fileList1 = [
          { url: "https://img.yuepinyuemei.com/" + this.form.show_image }
        ];
        this.$refs.uploadImg.getLength(this.fileList);
        this.$refs.uploadImg1.getLength(this.fileList1);
      } else {
        this.$message.error(res.message);
      }
    },
    // 获取医院类型
    async getHospitalType() {
      // console.log(888);
      let { data: res } = await hospitalCreate();
      if (res.status == 0) {
        this.hospitalType = res.data.hospitalTypeArray;
      } else {
        this.$message.error(res.message);
      }
    },
    // 获取板块/大区/省份
    async getAllregionList() {
      let { data: res } = await getRegion();
      if (res.status == 0) {
        this.plateList = res.data.moduleArray;
        this.regionalList = res.data.areaArray;
        this.provincesList = res.data.provinceArray;
      } else {
        this.$message.error(res.message);
      }
    },
    // 根据省份id获取城市
    handleChange(e) {
      // console.log("e", e);
      this.form.province_id = e;
      this.getCitysList(this.form.province_id);
    },
    async getCitysList(province_id) {
      let { data: res } = await getCitys({ province_id });
      if (res.status == 0) {
        this.citysList = res.data;
      } else {
        this.$message.error(res.message);
      }
    },
    // 完成
    complete(form) {
      this.form.hospital_icon = this.$refs.uploadImg.submitUpload()[0];
      this.form.show_image = this.$refs.uploadImg1.submitUpload()[0];
      this.$refs[form].validate(async valid => {
        if (valid) {
          if (this.type == "add") {
            let { data: res } = await hospitalStore(this.form);
            // console.log("res", res);
            if (res.status == 0) {
              this.$message.success("添加成功");
              this.$router.go(-1);
            } else {
              this.$message.error(res.message);
            }
          }
          if (this.type == "edit") {
            let { data: res } = await hospitalUpdate(this.form);
            // console.log("ress", res);
            if (res.status == 0) {
              this.$message.success("修改成功");
              this.$router.go(-1);
            } else {
              this.$message.error(res.message);
            }
          }
        } else {
          this.$message.warning("有必填项没填，不能提交哦");
        }
      });
    },
    // 获取经纬度
    getLngLat() {
      if (this.form.location_des) {
        const datas = {
          address: this.form.location_des
        };
        // console.log(this.form.address);
        getLat(datas)
          .then(res => {
            // if (res.status==200) {
            // console.log("res", res);
            this.form.location_lng = res.data.lng;
            this.form.location_lat = res.data.lat;
            this.getMap(res.data);
            // }
          })
          .catch(err => {
            // this.errorStatus(err.msg);
          });
      }
    },
    // 地图获取显示
    getMap(e) {
      console.log(e);
      var map = new AMap.Map("mapcontainer", {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 15, // 初始化地图层级
        center: [e.lng, e.lat] // 初始化地图中心点
      });
      var marker = new AMap.Marker({
        position: [e.lng, e.lat] // 位置
      });
      this.isShow = true;
      map.add(marker);
    }
  }
};
</script>
<style  scoped>
.allCenter {
  text-align: center;
  margin: 30px auto;
}
#mapcontainer {
  width: 350px;
  height: 350px;
  text-align: left;
  margin: 0 0 30px 150px;
  touch-action: none;
}
.mt_20 {
  margin: 0 0 20px 50px;
}
</style>